<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-sm-6 col-md-3" @click="class1Classifty()">
        <b-card>
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-menu"></i>
          </div>
          <div class="h4 mb-0">{{ class1 }}</div>
          <small class="text-muted text-uppercase font-weight-bold">一级分类</small>
          <b-progress class="progress-xs mt-3 mb-0" variant="info" :value="class1/10"/>
        </b-card>
      </div>
      <div class="col-sm-6 col-md-3" @click="class2Classifty()">
        <b-card>
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-menu"></i>
          </div>
          <div class="h4 mb-0">{{ class2 }}</div>
          <small class="text-muted text-uppercase font-weight-bold">二级分类</small>
          <b-progress class="progress-xs mt-3 mb-0" variant="success" :value="class2/10"/>
        </b-card>
      </div>
      <div class="col-sm-6 col-md-3" @click="information()">
        <b-card>
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-speech"></i>
          </div>
          <div class="h4 mb-0">{{ company }}</div>
          <small class="text-muted text-uppercase font-weight-bold">RFI/咨询信息</small>
          <b-progress class="progress-xs mt-3 mb-0" variant="warning" :value="company/10"/>
        </b-card>
      </div>
      <div class="col-sm-6 col-md-3"  @click="product()">
        <b-card>
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-puzzle"></i>
          </div>
          <div class="h4 mb-0">{{ goods }}</div>
          <small class="text-muted text-uppercase font-weight-bold">产品</small>
          <b-progress class="progress-xs mt-3 mb-0" :value="goods/100"/>
        </b-card>
      </div>
    </div>
  </div>
</template>

<script>
  import { getHomeCount } from '../service/api'
  export default {
    name: 'dashboard',
    data () {
      return {
        msg: 'Widgets',
        class1: '',
        class2: '',
        company: '',
        goods: ''
      }
    },
    methods: {
      class1Classifty () {
        this.$router.push({
          path: 'product/p_classify'
        })
      },
      class2Classifty () {
        this.$router.push({
          path: 'product/p_c_detail?id=T-001'
        })
      },
      information () {
        this.$router.push({
          path: '/information/rfi'
        })
      },
      product () {
        this.$router.push({
          path: '/product/p_detail'
        })
      }
    },
    created () {
      // fetch
      getHomeCount()
        .then(({ data, err }) => {
          console.log('err: ' + err)
          console.log('data: ' + data)
          this.class1 = data.class1
          this.class2 = data.class2
          this.company = data.company
          this.goods = data.goods
        })
    }
  }
</script>
<style>
  .card {
    cursor: pointer;
  }
</style>
